<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 90%;
            height: 350px;
            background-color: rgb(201, 198, 192);
        }

        div span {
            /* width: 200px; */
            height: 150px;
            background-color: red;
            /* margin-right: 10px; */
        }

        div span:nth-child(1) {
            width: 100px;
            background-color: #e08888;

            /* 
            2.align-self属性：只想让第一个子项目掉下来，使用align-self:flex-end
            如果所有子项目掉下来，使用align-items:flex-end
        */

            align-self: flex-end;
        }

        div span:nth-child(2) {
            background-color: #9c9797;

            /* 
            1.flex属性：由于没给第二个盒子设置宽度，flex:1即把剩余空间分为一份，全部给第二个盒子 
            */
            flex: 1;
        }

        div span:nth-child(3) {
            width: 100px;
            background-color: #93e982;
            /* 
            3.order属性:可以改变盒子的排放次序，默认ordr: 0;越小越在前面 
            */
            /* 意为把第三个子项目设为2，但是第四个默认为1，所以第四个会跑到第三个前面去 */
            order: 2;
        }

        div span:nth-child(4) {
            width: 50px;
            background-color: #57f4ff;
        }
    </style>
</head>

<body>
    <!-- 
        flex:控制子项目所占的份数，在剩余的空间里面来进行分配
        align-self:控制单个子项目自己在侧轴的排列方式
        order:定义子项的排列顺序 
    -->
    <div>
        <span>1</span>
        <span>2</span>
        <span>3我是第三个</span>
        <span>4我是第四个</span>
    </div>
</body>

</html>